<div class="container">
    <div class="row">
        <div class="col-md-4 form-group col-lg-offset-1">
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon2">Specific Time</span>
                <input class="form-control" placeholder="Please select a specific time" [(ngModel)]="bsRangeValue" bsDaterangepicker [minDate]="minDate" [maxDate]="maxDate" [bsConfig]="{ rangeInputFormat: 'YYYY/MM/DD' }">
            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon2">Technology</span>
                <input [(ngModel)]="selectedValue" [typeahead]="technologies" typeaheadOptionField="name" (typeaheadOnSelect)="onSelect($event)" (ngModelChange)="change($event)" class="form-control col-lg-3" placeholder="Please input skill to search">
            </div>
        </div>
        <button type="button" class="btn btn-success add-btn" (click)="search()">Search</button>
    </div>

    <div class="col-md-9 col-lg-offset-1 bg-info mentor_panel" *ngFor="let user of list_user">
        <div class="col-md-3 row mentor_panel_left">
            <div class="user-avatar">
                <img src="../../../assets/touxiang.png" class="avatar">
            </div>
            <div class="user-email">Email: {{user.email}}</div>
        </div>
        <div class="col-md-7 row mentor_panel_middle">
            <div class="user-name">{{user.name}}</div>
            <div class="row">
                <span class="title col-md-6">Profile:</span>
                <div class="user-detail col-md-4"> {{user.profile}}</div>
            </div>
            <div class="row">
                <span class="title col-md-6">Facilities:</span>
                <div class="user-detail col-md-4"> {{user.facilities}}</div>
            </div>
            <div class="row">
                <span class="title col-md-6">Years of experience:</span>
                <div class="user-detail col-md-4"> {{user.numOfYears}}</div>
            </div>
            <div class="row">
                <span class="title col-md-6">No. of trainings delivered:</span>
                <div class="user-detail col-md-4"> 1 </div>
            </div>
            <div class="row">
                <span class="title col-md-6">Fee charged:</span>
                <div class="user-detail col-md-4"> $ 83.5 </div>
            </div>
        </div>
        <div class="col-md-3 row mentor_panel_right">
            <button type="button" class="btn btn-warning add-btn" (click)="openModal(template);this.mentorId=user.id">Send Proposal</button>
        </div>
    </div>
</div>


<ng-template #template>
    <div class="modal-header">
        <h4 class="modal-title pull-left">Send Proposal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
        <div class="row">
            <label class="col-lg-2" for="username">Name</label>
            <div class="col-lg-7">
                <input type="text" class="form-control" [(ngModel)]="name" placeholder="Please input a training name">
            </div>
        </div>
        <div class="row proposal">
            <label class="col-lg-2" for="username">Proposal</label>
            <div class="col-lg-7">
                <textarea class="form-control" [(ngModel)]="proposal" placeholder="Please input proposal" maxlength="200" rows="5"></textarea>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="sendProposal();modalRef.hide()">Send</button>
        <button type="button" class="btn btn-outline-primary" (click)="modalRef.hide()">Cancel</button>
    </div>
</ng-template>